<template>
  <div class="channel-list">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="list-title">查询条件</div>
    <Row type="flex">
      <Form ref="formInline" :model="formInline" inline :label-width="0" label-position="left">
        <FormItem prop="status" label="">
          <Select v-model="formInline.status" placeholder="全部商户" style="minWidth:162px" filterable clearable>
            <Option v-for="item in MerchantStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="type" label="">
          <Select v-model="formInline.type" placeholder="全部分销机构" style="minWidth:162px" filterable clearable>
            <Option v-for="item in MerchantType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="outsideSwitch" label="">
          <Select v-model="formInline.outsideSwitch" placeholder="全部结佣规则" style="minWidth:162px" filterable clearable>
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="merchant2" label="">
          <Select v-model="formInline.merchant2" placeholder="全部结佣状态" style="minWidth:162px" filterable clearable>
            <Option v-for="item in sfList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
<!--        <FormItem label="" prop="isQFUser" v-if="false">-->
<!--          <IsQfUser v-model="formInline.isQFUser" placeholder="是否巧房用户" />-->
<!--        </FormItem>-->
        <FormItem prop="date" label="">
          <DatePicker ref="datePicker" type="daterange" @on-change="selectDate" placeholder="结佣日期" style="width: 200px;"></DatePicker>
        </FormItem>
        <FormItem label="" prop="searchContent">
          <Input type="text" v-model="formInline.searchContent" placeholder="客户姓名、客户电话、报备人姓名、报备人电话" clearable style="width: 300px;"/>
        </FormItem>
        <div class="form-but">
          <Button type="success" @click="getList">查询</Button>&nbsp;&nbsp;
          <Button @click="handleReset('formInline')">导出</Button>
        </div>
      </Form>
    </Row>
    <div>
      <Table class="list-table"
             stripe
             border
             ref="selection"
             :columns="columns"
             :data="dataList"
      ></Table>
      <div class="table-page">
        <Page :total="total" show-sizer show-elevator show-total @on-change="changePageNum" @on-page-size-change="changePageSize" />
      </div>
      <NormalReportDetailModal ref="normalReportDetail" :reportInfo="reportDetail" />
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/utils'
import Api from '@/api'
// import IsQfUser from '@/components/IsQfUser.vue';
import NormalReportDetailModal from './NormalReportDetailModal.vue'

const commonApi = Api.Common
const companyApi = Api.Company

export default {
  name: 'CommissionList',
  components: {
    // IsQfUser,
    NormalReportDetailModal,
  },
  data() {
    return {
      breadcrumb: ['佣金管理', '佣金列表'],
      formInline: {
        status: '',
        type: '',
        outsideSwitch: '',
        merchant2: '',
        searchContent: '',
        createTimeEnd: '',
        createTimeStart: '',
        province: '',
        city: '',
        zone: ''
      },
      reportDetail: {},
      pcList: [],
      depc: [],
      MerchantStatus: [
        {
          label: '启用',
          value: '2'
        },
        {
          label: '禁用',
          value: '1'
        },
      ],
      MerchantType: [
        {
          label: '开发商',
          value: 20
        },
        {
          label: '总代公司',
          value: 30
        },
        {
          label: '试用商户',
          value: 40
        },
      ],
      statusList: [
        {
          label: '不开通',
          value: '0'
        },
        {
          label: '开通',
          value: '1'
        }
      ],
      sfList: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      dataList: [],
      columns: [
        {
          title: '商户名称',
          key: 'companyName',
          minWidth: 200,
          tooltip: true
        },
        {
          title: '楼盘名称',
          key: 'companyAbbreviation',
          minWidth: 120
        },
        {
          title: '经纪公司',
          key: 'id',
          minWidth: 100,
        },
        {
          title: '经纪人',
          key: 'domain',
          minWidth: 180
        },
        {
          title: '客户姓名',
          key: 'companyType',
          minWidth: 120
        },
        {
          title: '客户电话',
          key: 'address',
          minWidth: 200,
          tooltip: true,
        },
        {
          title: '签约时间',
          key: 'address',
          minWidth: 200,
          tooltip: true,
        },
        {
          title: '结佣规则',
          key: 'address',
          minWidth: 200,
          tooltip: true,
        },
        {
          title: '结佣周期',
          key: 'merchantCode',
          minWidth: 200
        },
        {
          title: '应结金额',
          key: 'numberOfProperties',
          minWidth: 100
        },
        {
          title: '结佣状态',
          key: 'numberOfDistributors',
          minWidth: 100,
          render: (h, params) => (
            h('div', {}, params.row.status === '3' ? '已禁用' : '启用')
          )
        },
        {
          title: '结佣时间',
          key: 'createTime',
          minWidth: 200,
          render: (h, params) => (
            h('div', {}, formatTime(params.row.createTime, 'second'))
          )
        },
        {
          title: '操作',
          key: 'operate',
          minWidth: 80,
          fixed: 'right',
          render: (h, params) => (
            h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '15px'
                },
                on: {
                  click: () => {
                    this.showReportDetail(params.row);
                  }
                }
              }, '详情'),
            ])
          )
        }
      ],
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      ids: []
    }
  },
  methods: {
    showReportDetail(params) {
      this.reportDetail = params;
      this.$refs.normalReportDetail.cleanParams();
      this.$refs.normalReportDetail.initData(params);
    },
    // ------------------------------//

    selectDate(date) {
      this.formInline.createTimeStart = date[0]
      this.formInline.createTimeEnd = date[1]
    },
    selectPc(value, selectedData) {
      this.formInline.province = value[0]
      this.formInline.city = value[1]
      this.formInline.zone = value[2]
    },
    loadData(item, callback) {
      const len = item.__label.split('/').length
      item.loading = true
      setTimeout(async () => {
        const { responseCode, data } = await this.$request(commonApi.listCity, { provinceId: item.value })
        if (responseCode === '1') {
          if (len < 2) {
            data.forEach((city, index) => {
              city.loading = false
              city.children = []
            })
          }
          item.children = data
        }
        item.loading = false
        callback()
      }, 500)
    },
    // 分页变化
    changePageNum(pageNum) {
      this.getList({ pageNum })
    },
    // 条数变化
    changePageSize(pageSize) {
      this.getList({ pageSize })
    },

    async getList(paramsPage = null) {
      let pageNum
      let pageSize
      let page
      const statePage = this.page
      if (paramsPage) {
        pageNum = paramsPage.pageNum || statePage.pageNum
        pageSize = paramsPage.pageSize || statePage.pageSize
        page = { pageNum, pageSize }
        this.page = { pageNum, pageSize }
      } else {
        page = statePage
      }
      const formInline = this.formInline
      const value = {}
      Object.keys(formInline).forEach(key => {
        if (formInline[key]) {
          value[key] = formInline[key]
        }
      })
      const params = {
        page,
        ...value
      }
      const { responseCode, data } = await this.$request(companyApi.listCompany, params)
      if (responseCode === '1') {
        data.list.forEach((item, index) => {
          const map = {
            1: '中介',
            20: '开发商',
            30: '总代公司',
            40: '试用商户'
          }
          item.companyType = map[item.companyType]
        })
        this.dataList = data.list
        this.total = data.totalCount
      }
    }
  },
  mounted() {
    this.getList()
  },
}
</script>
<style lang="scss" scoped>

</style>
